<template>
  <div class="ticket">
    <Header :isBack="isBack" :title="title"></Header>
    <wv-flex class="ticketSearch">
      <wv-flex-item flex='5'>
        <div class="left">
          <img :src="searchIcon" alt="" v-show="keyword === ''">
          <input
            class="left-sear"
            type="text"
            v-model="keyword"
            placeholder="搜索门票"
          >
        </div>
      </wv-flex-item>
      <wv-flex-item>
        <div class="right">
          全国
          <img :src="cityIcon" alt="">
        </div>
      </wv-flex-item>
    </wv-flex>
    <wv-flex class="ticketBanner">
      <wv-flex-item>
        <img :src="bannerImg" alt="">
      </wv-flex-item>
    </wv-flex>
    <div class="headline">
      <div class="img">
        <img src="@/assets/ticket/headline.png" alt="">
      </div>
      <div class="content">
        票务的头条，欢迎过来看，最新消息
      </div>
      <div class="more">
        <img :src="rightIcon" alt="">
      </div>
    </div>
    <div class="welfare">
      <img src="@/assets/ticket/02.png" alt="">
    </div>
    <div class="recentShow">
      <div class="title">近期演出</div>
      
    </div>
  </div>
</template>

<script>
import { Flex, FlexItem } from 'we-vue'
export default {
    name: "ticket",
    data(){
        return {
            title:'门票',
            isBack:true,
            isHome: true,
            keyword: '',
            searchIcon:require("@/assets/index/search-gray.png"),
            cityIcon:require("@/assets/index/check-area.png"),
            rightIcon:require("@/assets/index/back-pic.png"),
            bannerImg:require("@/assets/ticket/1.png"),
            home: require("@/assets/public/home.png"),
            homeActive: require("@/assets/public/home-active.png"),
            mine: require("@/assets/public/mine.png"),
            mineActive: require("@/assets/public/mine-active.png"),
        }
    },
    methods: {
        changeContent() {
            // 让input搜索图片和placeholder文本内容一起消失
            if (this.keyWord != "") {
                this.isInput = true;
            }
        },
        clearContent() {
            this.keyWord = "";
        },
        toHome() {
          this.isHome = true;
        },
        toMine() {
          this.isHome = false;
        },
    }
}
</script>

<style scoped lang="scss">
.ticket{
  padding-top:1rem;;
  .ticketSearch{
    display: flex;
    justify-content: space-around;
    width:100%;
    height:50px;
    line-height: 50px;
    background-color: #ffffff;
    .left{
      position: relative;
      width:100%;
      text-align: center;
      .left-sear{
        box-sizing: border-box;
        width:95%;
        height:30px;
        border:1px solid #eeeeee;
        padding:0 10px;
        text-align:center;
        font-size: 16px;
        border-radius: 20px;
      }
      .left-sear:-moz-placeholder{
        color:rgba(138, 72, 72, 0.5);
      }
      img{
        display: inline-block;
        position: absolute;
        left:30%;
        top:17px;
        width:15px;
        height:15px;
      }
    }
    .right{
      width:100%;
      color: rgb(139,139,139);
      font-size: 17px;
      // text-align: center;
      img{
        display: inline-block;
        width:12px;
        height:7px;
      }
    }
  }
  .ticketBanner{
    img{
      width: 100%;
      height:200px;
    }
  }
  .headline{
    box-sizing:border-box;
    float:left;
    width:100%;
    padding:10px;
    margin:20px 0;
    background-color:#ffffff;
    .img{
      float:left;
      width:20%;
      img{
        width:85%;
        height:16px;
        text-align: center;
        margin-top:3px;
      }
    }
    .content{
      float:left;
      width:75%;
      color:#666666;
      font-size:16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .more{
       float:left;
       width:5%;
       img{
         width:10px;
         height:10px;
         margin-top:5px;
       }
    }
  }
  .welfare {
    box-sizing:border-box;
    width:100%;
    padding:0 10px;
    background-color: #ffffff;
    img{
      width:100%;
      height:100px;
    }
  }
  .recentShow{
    margin-top:20px;
    padding-left:10px;
    .title{
      color:#444444;
      font-size:16px;
      font-weight: bold;
    }
  }
}
</style>
